<template>
    <div style="display: flex">
        <el-button type="primary" style="margin-right: 15px" @click="addItem">新增</el-button>
        <el-input v-model="selectOptionName" placeholder="请输入班级"
                  style="width: 200px;height: 33px;margin-right: 15px;font-size: 15px;" clearable></el-input>
        <el-button type="primary" style="color: #fff;font-size: 12px;background-color: #1890ff;" @click="load">搜索
        </el-button>
    </div>
    <div>
        <el-table :data="tableData" :row-style="{ height: '77px' }" border
                  style="width: calc(100vw - 240px);margin-top: 20px;height: 75vh;color: #909399;font-size: 15px;">
            <el-table-column align="center" prop="id" label="ID" width="100px"/>
            <el-table-column align="center" prop="trainClassNum" label="班级编号" width="auto"/>
            <el-table-column align="center" prop="stageNum" label="培训档期" width="auto"/>
            <el-table-column align="center" prop="manageName" label="培训负责人" width="auto"/>
            <el-table-column align="center" prop="classSize" label="班级人数" width="auto"/>
            <el-table-column align="center" prop="state" label="班级状态" width="auto">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.state === 0">活跃</el-tag>
                    <el-tag type="warning" v-else-if="scope.row.state === 1">结业</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" width="auto"/>
            <el-table-column align="center" label="操作" fixed="right" width="200">
                <template v-slot="scope">
                    <div>
                        <el-button type="primary" size="small" icon="Edit" @click="editItem(scope.row)">编辑</el-button>
                        <el-button type="warning" size="small" icon="View" @click="toClassCourse(scope.row.id)">课程</el-button>
                    </div>
                    <div>
                        <el-button type="success" size="small" icon="View" @click="toStuList(scope.row.id)">学生</el-button>
                        <el-button type="success" size="small" icon="View" @click="toLogList(scope.row.id)">总结</el-button>
                    </div>
                    <div>
                        <el-button type="danger" size="small" icon="Delete" @click="deleteItem(scope.row.id)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <!--      分页-->
        <div style="margin-top: 10px">
            <el-pagination
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[10, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>

        <!--添加班级对话框-->
        <el-dialog :close-on-click-modal="false" title="班级操作" v-model="dialogVisible" width="560" @close="reset('form')">
            <el-form label-position="left" :inline="true" :model="form" ref="form" :rules="rules">
                <el-form-item label="班级编号" prop="trainClassNum">
                    <el-input v-model="form.trainClassNum" placeholder="请输入班级编号" clearable/>
                </el-form-item>
                <el-form-item label="培训负责人" prop="manageId">
                    <el-select
                            v-model="form.manageId"
                            placeholder="请选择培训负责人"
                            clearable
                            filterable
                            style="margin-left: 15px;width: 185px">
                        <el-option
                                v-for="item in manageOptions"
                                :key="item.id"
                                :label="item.username"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="培训档期" prop="stageId">
                    <el-select
                            v-model="form.stageId"
                            placeholder="请选择培训档期"
                            clearable
                            filterable
                            style="width: 185px">
                        <el-option
                                v-for="item in stageOptions"
                                :key="item.id"
                                :label="item.stageNum"
                                :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="班级状态" prop="state">
                    <el-select
                            v-model="form.state"
                            placeholder="请选择班级状态"
                            style="width: 185px">
                        <el-option
                                v-for="item in stateOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="reset('form')">取消</el-button>
                    <el-button type="primary" @click="submitForm('form')">保存</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>


<script>

    import {ref} from 'vue'
    import request from "~/utils/request.js";
    import {ElMessage} from "element-plus";

    export default {
        data() {
            return {
                dialogVisible: false,
                tableData: [],
                form: {},
                manageOptions: [],
                stageOptions: [],
                stateOptions: [{
                    value: 0,
                    label: '活跃',
                },
                    {
                        value: 1,
                        label: '结业',
                    }],
                selectOptionName: '',
                currentPage: 1,
                pageSize: 10,
                total: 0,
                rules: {
                    trainClassNum: [
                        {required: true, message: '请输入班级编号', trigger: 'blur'},
                    ],
                    manageId: [
                        {required: true, message: '请选择培训负责人', trigger: 'blur'},
                    ],
                    stageId: [
                        {required: true, message: '请选择培训档期', trigger: 'blur'},
                    ],
                    state: [
                        {required: true, message: '请选择班级状态', trigger: 'blur'},
                    ]
                },
            }
        },
        async created() {
            await this.getManageOptions()
            await this.getStageOptions()
            await this.load()
        },
        methods: {
            async load() {
                request.get("/train-class/likeSelect?pageNum=" + this.currentPage + "&pageSize=" + this.pageSize+ "&trainClassNum=" + this.selectOptionName).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "records") {
                                this.tableData = res.data[key];
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        ElMessage.error("错误" + res.msg)
                    }
                })
            },
            async getManageOptions() {
                request.get("/user/selectManages").then(res => {
                    this.manageOptions = res.data
                })
            },
            async getStageOptions() {
                request.get("/stage/all").then(res => {
                    this.stageOptions = res.data
                })
            },
            toClassCourse(scope) {
                this.$router.push({path: "/class/classCourseList", query: {classId: scope}});
            },
            toStuList(scope) {
                this.$router.push({path: "/user/user/studentList", query: {classId: scope}});
            },
            toLogList(scope) {
                this.$router.push({path: "/class/classLogList", query: {classId: scope}});
            },
            // 编辑设备
            editItem(item) {
                Object.assign(this.form, item)
                this.dialogVisible = true
            },
            addItem() {
                this.dialogVisible = true;
            },
            // 删除
            deleteItem(scope) {
                this.$confirm('是否确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get("/train-class/delete/" + scope).then(res => {
                        if (res.code === '200') {
                            this.$message.success("成功")
                            this.load()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                });
            },
            // 提交
            submitForm(val) {
                this.$refs[val].validate((valid) => {
                    if (valid) {
                        request.post("/train-class/edit", this.form).then(res => {
                            if (res.code === '200') {
                                this.$message({
                                    message: "成功",
                                    type: "success"
                                })
                                this.load()
                                this.reset(val)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                })
            },
            // 取消
            reset(val) {
                this.dialogVisible = false;
                this.form = {};
                this.$refs[val].resetFields();
            },
            handleCurrentChange(item) {
                // 改变当前页码触发
                this.currentPage = item
                this.load()
            },
            handleSizeChange(item) {   // 改变当前每页的个数触发
                this.pageSize = item
                this.load()
            },
        }
    }
</script>

<style>
</style>
